import React, { useState, useEffect } from 'react';
import {
    MoneyCollectOutlined
} from '@ant-design/icons';
import LineChart from './LineChart';
import XinZeng from './XinZeng';
import QuShi from './QuShi';
import XiaoShou from './XiaoShou';
import YeJi from './YeJi';

import './index.scss'
import service from '../../../api';
import { message } from 'antd';
interface ParentProps {
    message?: any;
}
const Staging = (props: ParentProps) => {
    const { message } = props;
    //传值
    const [data, setData] = useState(null);
    useEffect(() => {
        linechartchind()
    }, [])
    var linechartchind = async () => {
        var res: any = await service.linechart.get_linechart()
        // var line = await res.data[0].json()
        return setData(res)
    }
    console.log(data);

    return (
        <div className='staging'>
            {/* 数据概览 */}
            <nav>
                <span>数据概览</span>
                <span className='time'>更新时间:2023年6月19日 12:35:59</span>
                <br />
                <div className="nav-div">
                    <div>
                        <p>今日销售额</p>
                        <span>765400.00</span>
                        <p>+16.57%</p>
                        <img src="https://cdn7.axureshop.com/demo/2112109/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u11388.svg" alt="" />
                    </div>
                    <div>
                        <p>今日订单数</p>
                        <span>6988</span>
                        <p>+10.69%</p>
                        <img src="https://cdn7.axureshop.com/demo/2112109/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u11399.svg" alt="" />
                    </div>
                    <div>
                        <p>今日销售利润</p>
                        <span>84890.00</span>
                        <p>-12.37%</p>
                        <img src="https://cdn7.axureshop.com/demo/2112109/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u11413.svg" alt="" />
                    </div>
                    <div>
                        <p>今日销售产品数</p>
                        <span>26937</span>
                        <p>+10.81%</p>
                        <img src="https://cdn7.axureshop.com/demo/2112109/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u11406.svg" alt="" />
                    </div>
                    <div>
                        <p>今日新增用户</p>
                        <span>8689</span>
                        <p>+16.37%</p>
                        <img src="https://cdn7.axureshop.com/demo/2112109/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u11672.svg" alt="" />
                    </div>
                </div>

            </nav>
            {/* 下方数据 */}
            <main>
                <div className="left">
                    <div className='daiban'>
                        <p>代办事项</p>
                        <div className="left-daiban">
                            <div className='daiban-div'>
                                <span>
                                    <img src="https://cdn7.axureshop.com/demo/2112109/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u11360.svg" alt="" />
                                </span>
                                <div>
                                    <p>7165</p>
                                    <span>今日订单</span>
                                </div>
                            </div>
                            <div className='daiban-div'>
                                <span style={{ background: 'orange' }}>
                                    <img src="https://cdn7.axureshop.com/demo/2112109/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u11366.svg" alt="" />
                                </span>
                                <div>
                                    <p>6713</p>
                                    <span>待发货订单</span>
                                </div>
                            </div>
                            <div className='daiban-div'>
                                <span style={{ background: 'green' }}>
                                    <img src="https://cdn7.axureshop.com/demo/2112109/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u11372.svg" alt="" />
                                </span>
                                <div>
                                    <p>53</p>
                                    <span>待处理售后</span>
                                </div>
                            </div>
                            <div className='daiban-div'>
                                <span style={{ background: 'yellow' }}>
                                    <img src="https://cdn7.axureshop.com/demo/2112109/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u11378.svg" alt="" />
                                </span>
                                <div>
                                    <p>645</p>
                                    <span>库存预警商品</span>
                                </div>
                            </div>
                            <div className='daiban-div'>
                                <span style={{ background: 'red' }}>
                                    <img src="https://cdn7.axureshop.com/demo/2112109/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u11384.svg" alt="" />
                                </span>
                                <div>
                                    <p>45</p>
                                    <span>活动即将到期</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className='qushi'>
                        <LineChart message={data}></LineChart>
                    </div>
                    <div className="xz_qs">
                        <div className="xz">
                            <XinZeng></XinZeng>
                        </div>
                        <div className="rh">
                            <QuShi></QuShi>
                        </div>
                    </div>
                </div>
                <div className="right">
                    <XiaoShou></XiaoShou>
                    <YeJi></YeJi>
                </div>
            </main>
        </div>
    );
};

export default Staging;